<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <div th:replace="fragments/header :: navbar"></div>
    <div class="container-fluid p-5">
      <h3 class="text-center ">欢迎使用在线书店系统</h3>
      <div class="row justify-content-center">
          <div class="col-4">
            <div class="alert alert-danger" th:if="${param.error}" >
              <strong>无效用户名和密码</strong>
            </div>
            <form class="form" role="form" th:action="@{/login}" method="post">
              <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" class="form-control" name="username"
                  id="username" placeholder="用户名" required>
              </div>
              <div class="form-group">
                <label for="password">密&nbsp&nbsp&nbsp&nbsp码：</label>
                <input type="password" class="form-control" name="password"
                       id="password" placeholder="密码" required>
              </div>
              <div class="col-12 text-end p-2">
                <button type="submit" class="btn btn-primary">登录</button>
                <a class="btn btn-primary" th:href="@{/registration}">注册</a>
              </div>

            </form>
          </div>
          <div class="row justify-content-center">
              <div class="col-4">
                  <div class="alert alert-warning">
                      <span>还未注册用户吗？请先注册：</span>
                  </div>
              </div>
          </div>
      </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-ep+dxp/oz2RKF89ALMPGc7Z89QFa32C8Uv1A3TcEK8sMzXVysblLA3+eJWTzPJzT" crossorigin="anonymous"></script>

</html>